<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .swiper-container {
        width: 100vw;
        height: 100vh;
      }

      .swiper-slide {
        width: 100%;
        height: 100%;
      }

      .swiper-slide.red {
        background-color: red;
      }

      .swiper-slide.blue {
        background-color: blue;
      }

      .swiper-slide.yellow {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide red">Slide 1</div>
        <div class="swiper-slide blue">Slide 2</div>
        <div class="swiper-slide yellow">Slide 3</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>

    <button>点击切换自动播放</button>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script>
      // 第一个参数 选择器字符串  第二个参数 对象 option 选项
      var mySwiper = new Swiper(".swiper-container", {
        direction: "vertical", // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,
        // effect: "fade",
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },

        // 如果需要滚动条
        // scrollbar: {
        //   el: ".swiper-scrollbar",
        // },
      });

      var button = document.querySelector("button");
      var flag = true;

      button.addEventListener("click", function () {
        flag = !flag;
        flag ? mySwiper.autoplay.start() : mySwiper.autoplay.stop();
      });
    </script>
  </body>
</html>
